<!--
 * @Date: 2023-03-22 12:34:24
 * @LastEditTime: 2023-03-29 13:27:12
 * @FilePath: /NLK/src/components/rework/Rnavbar.vue
 * 介绍:
-->
<script lang="ts" setup>
import omit from "lodash/omit";
const props = withDefaults(
  defineProps<{
    title?: string;
    leftText?: string;
    rightText?: string;
    leftArrow?: boolean;
    border?: boolean;
    fixed?: boolean;
    placeholder?: boolean;
    zIndex?: StrNumber;
    safeAreaInsetTop?: boolean;
    clickable?: boolean;
    bg?: string;
  }>(),
  {
    fixed: true,
    placeholder: true,
    clickable: false,
    border: false,
    bg: "var(--van-nav-bar-background)",
  }
);
const emit = defineEmits<{
  (e: "click-left", v: MouseEvent): void;
  (e: "click-right", v: MouseEvent): void;
}>();
const $props = computed(() => omit(props, ["placeholder", "bg", "leftArrow"]));
</script>

<template>
  <div class="Rnavbar" :style="{ '--bg': props.bg }">
    <van-nav-bar
      @click-left="(e) => emit('click-left', e)"
      @click-right="(e) => emit('click-right', e)"
      v-bind="$props"
    >
      <template #left>
        <slot name="left">
          <van-icon
            @click="$router.back()"
            v-show="props.leftArrow"
            name="arrow-left"
            color="var(--color)"
            class="active"
          />
        </slot>
      </template>
      <template #title><slot></slot></template>
      <template #right><slot name="right"></slot></template>
    </van-nav-bar>
    <div v-show="props.placeholder && props.fixed" class="Rnavbar_placeholder"></div>
  </div>
</template>

<style lang="less" scoped>
.Rnavbar_placeholder {
  height: var(--van-nav-bar-height);
}
</style>
<style lang="less">
.van-nav-bar {
  background: var(--bg);
}
</style>
